////
/// Components
/// StackedList variants
////

@import 'components/Handle/props';
@import 'components/Patterns/props';
@import 'props';

///
/// Size variants
.StackedListWrapper--sizeMedium {
  .StackedListHeader,
  .StackedListContent {
    height: stacked-list-item(medium);

    @media screen and (min-width: get-breakpoint(desktop)) {
      height: stacked-list-item(medium, desktop);
    }
  }
}

.StackedListWrapper--sizeLarge {
  .StackedListHeader,
  .StackedListContent {
    height: stacked-list-item(large);

    @media screen and (min-width: get-breakpoint(desktop)) {
      height: stacked-list-item(large, desktop);
    }
  }
}

///
/// Vertical scroll variant
/// Not to be paired with --axisHorizontal
.StackedListWrapper--hasScrollIndicator {
  &::after {
    @include scroll-indicator;
  }

  // does not address :focus on child elements
  &:hover {
    &::after {
      opacity: 0.1;
    }
  }
}

.StackedList--hasScroll {
  @include stacked-list-scroll-height;
  overflow-y: scroll;

  @media screen and (min-width: get-breakpoint(desktop)) {
    @include stacked-list-scroll-height(stacked-list-item(base, desktop), 7, base);
  }

  // Size variants

  .StackedListWrapper--sizeMedium & {
    @include stacked-list-scroll-height(stacked-list-item(medium), 3);

    @media screen and (min-width: get-breakpoint(desktop)) {
      @include stacked-list-scroll-height(stacked-list-item(medium, desktop), 3, base);
    }
  }

  .StackedListWrapper--sizeLarge & {
    @include stacked-list-scroll-height(stacked-list-item(large), 3);

    @media screen and (min-width: get-breakpoint(desktop)) {
      @include stacked-list-scroll-height(stacked-list-item(large, desktop), 3, base);
    }
  }
}

///
/// Axis variant
/// Has horizontal scrolling built-in
.StackedListWrapper--axisHorizontal {
  display: flex;

  &::after {
    @include scroll-indicator(false);
  }

  // does not address :focus on child elements
  &:hover {
    &::after {
      opacity: 0.1;
    }
  }

  .StackedListHeader,
  .StackedListContent {
    height: stacked-list-item();

    @media screen and (min-width: get-breakpoint(tablet)) {
      height: stacked-list-item(base, desktop);
    }
  }

  .StackedListHeader {
    flex: 0 0 stacked-list-item(large);

    @media screen and (min-width: get-breakpoint(tablet)) {
      flex-basis: stacked-list-item(large, desktop);
    }
  }

  .StackedList {
    display: flex;
    flex: 1 1 auto;
    margin-top: 0;
    margin-left: -(get-border(thin));
    overflow-x: scroll;

    @media screen and (min-width: get-breakpoint(tablet)) {
      margin-left: -(get-border());
    }
  }

  .StackedListItem {
    flex: 1 0 stacked-list-item(large);
    max-width: stacked-list-item(large) * 2;

    &:nth-child(1n + 2) {
      margin-top: 0;
      margin-left: -(get-border(thin));

      @media screen and (min-width: get-breakpoint(tablet)) {
        margin-left: -(get-border());
      }
    }

    @media screen and (min-width: get-breakpoint(tablet)) {
      flex-basis: stacked-list-item(large, desktop);
      max-width: stacked-list-item(large, desktop) * 2;
    }
  }

  .draggable--original:first-child + .StackedListItem {
    margin-left: 0;
  }

  .StackedListContent {
    flex-direction: column;
    justify-content: center;
    text-align: center;

    &::before {
      top: -(get-border(thin));
      right: auto;
      bottom: -(get-border(thin));
      left: -(get-border(thin));
      width: get-border(thin);
      height: auto;

      @media screen and (min-width: get-breakpoint(tablet)) {
        top: -(get-border());
        bottom: -(get-border());
        left: -(get-border());
        width: get-border();
      }
    }
  }

  .DragHandle,
  .NopeHandle {
    margin-left: 0;
  }

  &.StackedListWrapper--sizeMedium {
    .StackedListHeader,
    .StackedListContent {
      height: stacked-list-item(medium);

      @media screen and (min-width: get-breakpoint(tablet)) {
        height: stacked-list-item(medium, desktop);
      }
    }
  }

  &.StackedListWrapper--sizeLarge {
    .StackedListHeader,
    .StackedListContent {
      height: stacked-list-item(large);

      @media screen and (min-width: get-breakpoint(tablet)) {
        height: stacked-list-item(large, desktop);
      }
    }
  }
}

///
/// Draggable variant
.StackedListItem--isDraggable {
  cursor: get-cursor(drag);

  .StackedListContent {
    background-color: white;
  }

  // interaction
  &:focus {
    outline: none;
  }

  &:focus,
  &:hover {
    .StackedListContent {
      color: get-color(brand, blue);
    }

    + .StackedListItem {
      .StackedListContent::before {
        background-color: get-color(brand, blue);
        opacity: 1;
      }
    }
  }

  &.draggable-source--is-dragging {
    .StackedListContent {
      color: get-color(brand, blue);

      .Pattern--typeHalftone {
        @include pattern-halftone-animated;
      }
    }

    + .StackedListItem,
    + .draggable--original + .StackedListItem {
      // stylelint-disable-next-line selector-max-class
      .StackedListContent::before {
        background-color: get-color(brand, blue);
        opacity: 1;
      }
    }
  }

  &.draggable-source--placed {
    .StackedListContent {
      .Pattern--typePlaced {
        @include pattern-placed-animated;
      }
    }
  }

  &.draggable-mirror {
    z-index: get-z-index(overlay);
    transition: width get-duration() get-easing(bungie), height get-duration() get-easing(bungie);

    .StackedListContent {
      height: 100%;
      color: white;
      background-color: get-color(brand, blue);
      border-color: get-color(brand, blue);
      transform: scale(1.025);

      &::before,
      &::after {
        display: none;
      }
    }

    .DragHandle {
      @include drag-handle-dragging;
    }
  }
}
